<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
	<meta charset="utf-8" />
	<style type="text/css">
		body{
		  position: relative;
		  width:100vw;
		  height: 100vh;
		  margin: 0;
		}
		canvas{
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  margin-left: -150px;
		  margin-top: -150px;
		  border: 1px dashed rgba(0,0,0,0.1)
		}
	</style>
</head>
<body>
	<canvas id="c" width="600px" height="500px"></canvas>
 	<input type="range" id="r" min="0" max="100" step="1">
	<script type="text/javascript">
		var canvas = document.getElementById('c');
		var ctx = canvas.getContext('2d');
		// var range = document.getElementById('r');

		//range控件信息
		// var rangeValue = range.value;
		var nowRange = 40;   //用于做一个临时的range

		//画布属性
		var mW = canvas.width = 350;
		var mH = canvas.height = 350;
		var lineWidth = 1;

		//圆属性
		var r = mH / 2; //圆心
		var cR = r - 32 * lineWidth; //圆半径

		//Sin 曲线属性
		var sX = 0;
		var axisLength = mW; //轴长
		var waveWidth = 0.018 ;   //波浪宽度,数越小越宽    
		var waveHeight = 6; //波浪高度,数越大越高
		var speed = 0.0003; //波浪速度，数越大速度越快
		var xOffset = 0; //波浪x偏移量

		ctx.lineWidth = lineWidth;

		//画圈函数
		var IsdrawCircled = false;
		// var drawCircle = function(){
		// 	ctx.beginPath();
		// 	ctx.strokeStyle = '#1080d0';
		// 	ctx.arc(r, r, cR+1, 0, 2 * Math.PI);
		// 	ctx.stroke();
		// 	ctx.beginPath();
		// 	ctx.arc(r, r, cR, 0, 2 * Math.PI);
		// 	ctx.clip();
		// 	IsdrawCircled = true;
		// }

		//画sin 曲线函数
		var drawSin = function(xOffset, color, waveHeight){
			ctx.save();

			var points=[];  //用于存放绘制Sin曲线的点

			ctx.beginPath();
			//在整个轴长上取点
			for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
			  //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
			  var y = Math.sin((-sX - x) * waveWidth + xOffset) * 0.8 + 0.1;

			  var dY = mH * (1 - nowRange / 100 );

			  points.push([x, dY + y * waveHeight]);
			  ctx.lineTo(x, dY + y * waveHeight);     
			}

			//封闭路径
			ctx.lineTo(axisLength, mH);
			ctx.lineTo(sX, mH);
			ctx.lineTo(points[0][0],points[0][1]);
			ctx.fillStyle = color;
			ctx.fill();

			ctx.restore();
		};

		var render = function(){
			ctx.clearRect(0, 0, mW, mH);

			// rangeValue = range.value;

			// if(IsdrawCircled == false){
			//   drawCircle();   
			// }

			// if(nowRange <= rangeValue){
			//   var tmp = 1;
			//   nowRange += tmp;
			// }

			// if(nowRange > rangeValue){
			//   var tmp = 1;
			//   nowRange -= tmp;
			// }

			drawSin(xOffset+Math.PI*0.7, 'rgba(28, 134, 209, 0.5)', 18);
			drawSin(xOffset, '#1c86d1', 18);
			drawText(); 

			xOffset += speed;
			requestAnimationFrame(render);
		}
		//写百分比文本函数
		var drawText = function(){
			ctx.save();

			var size = 0.4*cR;
			ctx.font = size + 'px Microsoft Yahei';
			ctx.textAlign = 'center';
			ctx.fillStyle = "rgba(06, 85, 128, 0.5)";
			ctx.fillText(~~nowRange + '%', r, r + size / 2);

			ctx.restore();
		};

		render();

	</script>
</body>
</html>